<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1476725" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">隔离品处置</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">返工返修</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">流程卡管理</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">报废单</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">保养 2</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">m_asm</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">维修任务</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">开卷</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">发货通知</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">收货通知</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e0;</span>
                <div class="name">来料检验</div>
                <div class="code-name">&amp;#xe8e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">末件检</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">首件检</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">退库</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">报废</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">自动补库存</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">检验中</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">不合格</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">待检</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">合格</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cc;</span>
                <div class="name">来料检验清单</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">过程检验工单</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">成品检</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">未检</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">已检</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">已完成</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">未 完成</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">报工</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">扫码入库检</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">入库检</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">点检</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73b;</span>
                <div class="name">扫码半成品检</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe739;</span>
                <div class="name">扫码巡检</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe738;</span>
                <div class="name">扫码首末检</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">上模</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">下模</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe734;</span>
                <div class="name">巡检</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe733;</span>
                <div class="name">首末检</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">半成品检</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">设备点检扫码</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">工序检扫码</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">巡检扫码</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">末件检扫码</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">首件检扫码</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">设备点检</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">CIS</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">版权</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe732;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">个人信息</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">上</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">下模</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">上模</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">入库检</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">巡检</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">工序检</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">末件检</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">首件检</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">下模</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">上模</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">任务</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe918;</span>
                <div class="name">工作台</div>
                <div class="code-name">&amp;#xe918;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">我 的</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">入库检</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">工序检</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">巡检作业</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">首检作业</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">末检作业</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1725866226444') format('woff2'),
       url('iconfont.woff?t=1725866226444') format('woff'),
       url('iconfont.ttf?t=1725866226444') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-a-iconchuzhizhong"></span>
            <div class="name">
              隔离品处置
            </div>
            <div class="code-name">.icon-a-iconchuzhizhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--_fanxiu"></span>
            <div class="name">
              返工返修
            </div>
            <div class="code-name">.icon--_fanxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liuchengkaguanli"></span>
            <div class="name">
              流程卡管理
            </div>
            <div class="code-name">.icon-liuchengkaguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baofeidan"></span>
            <div class="name">
              报废单
            </div>
            <div class="code-name">.icon-baofeidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoyang"></span>
            <div class="name">
              保养 2
            </div>
            <div class="code-name">.icon-baoyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-m_asm"></span>
            <div class="name">
              m_asm
            </div>
            <div class="code-name">.icon-m_asm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixiurenwu"></span>
            <div class="name">
              维修任务
            </div>
            <div class="code-name">.icon-weixiurenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaijuanji-d"></span>
            <div class="name">
              开卷
            </div>
            <div class="code-name">.icon-kaijuanji-d
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fahuotongzhi"></span>
            <div class="name">
              发货通知
            </div>
            <div class="code-name">.icon-fahuotongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouhuotongzhidanliebiao"></span>
            <div class="name">
              收货通知
            </div>
            <div class="code-name">.icon-shouhuotongzhidanliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lailiaojianyan"></span>
            <div class="name">
              来料检验
            </div>
            <div class="code-name">.icon-lailiaojianyan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mojianjian1"></span>
            <div class="name">
              末件检
            </div>
            <div class="code-name">.icon-mojianjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoujianjian1"></span>
            <div class="name">
              首件检
            </div>
            <div class="code-name">.icon-shoujianjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuiku"></span>
            <div class="name">
              退库
            </div>
            <div class="code-name">.icon-tuiku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baofei"></span>
            <div class="name">
              报废
            </div>
            <div class="code-name">.icon-baofei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zidongbukucun"></span>
            <div class="name">
              自动补库存
            </div>
            <div class="code-name">.icon-zidongbukucun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianyanzhong"></span>
            <div class="name">
              检验中
            </div>
            <div class="code-name">.icon-jianyanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-buhege"></span>
            <div class="name">
              不合格
            </div>
            <div class="code-name">.icon-buhege
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daijian"></span>
            <div class="name">
              待检
            </div>
            <div class="code-name">.icon-daijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hege"></span>
            <div class="name">
              合格
            </div>
            <div class="code-name">.icon-hege
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saoma1"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.icon-saoma1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lailiaojianyanqingdan"></span>
            <div class="name">
              来料检验清单
            </div>
            <div class="code-name">.icon-lailiaojianyanqingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guochengjianyangongdan"></span>
            <div class="name">
              过程检验工单
            </div>
            <div class="code-name">.icon-guochengjianyangongdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chengpinjian"></span>
            <div class="name">
              成品检
            </div>
            <div class="code-name">.icon-chengpinjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weijian"></span>
            <div class="name">
              未检
            </div>
            <div class="code-name">.icon-weijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yijian"></span>
            <div class="name">
              已检
            </div>
            <div class="code-name">.icon-yijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiwancheng-copy"></span>
            <div class="name">
              已完成
            </div>
            <div class="code-name">.icon-yiwancheng-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiwancheng"></span>
            <div class="name">
              未 完成
            </div>
            <div class="code-name">.icon-weiwancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baogong"></span>
            <div class="name">
              报工
            </div>
            <div class="code-name">.icon-baogong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saomarukujian"></span>
            <div class="name">
              扫码入库检
            </div>
            <div class="code-name">.icon-saomarukujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rukujian2"></span>
            <div class="name">
              入库检
            </div>
            <div class="code-name">.icon-rukujian2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianjian"></span>
            <div class="name">
              点检
            </div>
            <div class="code-name">.icon-dianjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saomabanchengpinjian"></span>
            <div class="name">
              扫码半成品检
            </div>
            <div class="code-name">.icon-saomabanchengpinjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saomaxunjian"></span>
            <div class="name">
              扫码巡检
            </div>
            <div class="code-name">.icon-saomaxunjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saomashoumojian"></span>
            <div class="name">
              扫码首末检
            </div>
            <div class="code-name">.icon-saomashoumojian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangmo2"></span>
            <div class="name">
              上模
            </div>
            <div class="code-name">.icon-shangmo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiamo2"></span>
            <div class="name">
              下模
            </div>
            <div class="code-name">.icon-xiamo2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunjian1"></span>
            <div class="name">
              巡检
            </div>
            <div class="code-name">.icon-xunjian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoumojian"></span>
            <div class="name">
              首末检
            </div>
            <div class="code-name">.icon-shoumojian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banchengpinjian"></span>
            <div class="name">
              半成品检
            </div>
            <div class="code-name">.icon-banchengpinjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeidianjiansaoma"></span>
            <div class="name">
              设备点检扫码
            </div>
            <div class="code-name">.icon-shebeidianjiansaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongxujiansaoma"></span>
            <div class="name">
              工序检扫码
            </div>
            <div class="code-name">.icon-gongxujiansaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunjiansaoma"></span>
            <div class="name">
              巡检扫码
            </div>
            <div class="code-name">.icon-xunjiansaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mojianjiansaoma"></span>
            <div class="name">
              末件检扫码
            </div>
            <div class="code-name">.icon-mojianjiansaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoujianjiansaoma"></span>
            <div class="name">
              首件检扫码
            </div>
            <div class="code-name">.icon-shoujianjiansaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shebeidianjian"></span>
            <div class="name">
              设备点检
            </div>
            <div class="code-name">.icon-shebeidianjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saoma"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.icon-saoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-CIS"></span>
            <div class="name">
              CIS
            </div>
            <div class="code-name">.icon-CIS
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zyojiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-zyojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banquan"></span>
            <div class="name">
              版权
            </div>
            <div class="code-name">.icon-banquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenxinxi"></span>
            <div class="name">
              个人信息
            </div>
            <div class="code-name">.icon-gerenxinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shang"></span>
            <div class="name">
              上
            </div>
            <div class="code-name">.icon-shang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiamo1"></span>
            <div class="name">
              下模
            </div>
            <div class="code-name">.icon-xiamo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangmo1"></span>
            <div class="name">
              上模
            </div>
            <div class="code-name">.icon-shangmo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rukujian1"></span>
            <div class="name">
              入库检
            </div>
            <div class="code-name">.icon-rukujian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunjian"></span>
            <div class="name">
              巡检
            </div>
            <div class="code-name">.icon-xunjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongxujian1"></span>
            <div class="name">
              工序检
            </div>
            <div class="code-name">.icon-gongxujian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mojianjian"></span>
            <div class="name">
              末件检
            </div>
            <div class="code-name">.icon-mojianjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoujianjian"></span>
            <div class="name">
              首件检
            </div>
            <div class="code-name">.icon-shoujianjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiamo"></span>
            <div class="name">
              下模
            </div>
            <div class="code-name">.icon-xiamo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangmo"></span>
            <div class="name">
              上模
            </div>
            <div class="code-name">.icon-shangmo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renwu"></span>
            <div class="name">
              任务
            </div>
            <div class="code-name">.icon-renwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongzuotai"></span>
            <div class="name">
              工作台
            </div>
            <div class="code-name">.icon-gongzuotai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我 的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rukujian"></span>
            <div class="name">
              入库检
            </div>
            <div class="code-name">.icon-rukujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongxujian"></span>
            <div class="name">
              工序检
            </div>
            <div class="code-name">.icon-gongxujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunjianzuoye"></span>
            <div class="name">
              巡检作业
            </div>
            <div class="code-name">.icon-xunjianzuoye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoujianzuoye"></span>
            <div class="name">
              首检作业
            </div>
            <div class="code-name">.icon-shoujianzuoye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mojianzuoye"></span>
            <div class="name">
              末检作业
            </div>
            <div class="code-name">.icon-mojianzuoye
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-iconchuzhizhong"></use>
                </svg>
                <div class="name">隔离品处置</div>
                <div class="code-name">#icon-a-iconchuzhizhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--_fanxiu"></use>
                </svg>
                <div class="name">返工返修</div>
                <div class="code-name">#icon--_fanxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liuchengkaguanli"></use>
                </svg>
                <div class="name">流程卡管理</div>
                <div class="code-name">#icon-liuchengkaguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baofeidan"></use>
                </svg>
                <div class="name">报废单</div>
                <div class="code-name">#icon-baofeidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoyang"></use>
                </svg>
                <div class="name">保养 2</div>
                <div class="code-name">#icon-baoyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-m_asm"></use>
                </svg>
                <div class="name">m_asm</div>
                <div class="code-name">#icon-m_asm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixiurenwu"></use>
                </svg>
                <div class="name">维修任务</div>
                <div class="code-name">#icon-weixiurenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaijuanji-d"></use>
                </svg>
                <div class="name">开卷</div>
                <div class="code-name">#icon-kaijuanji-d</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fahuotongzhi"></use>
                </svg>
                <div class="name">发货通知</div>
                <div class="code-name">#icon-fahuotongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouhuotongzhidanliebiao"></use>
                </svg>
                <div class="name">收货通知</div>
                <div class="code-name">#icon-shouhuotongzhidanliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lailiaojianyan"></use>
                </svg>
                <div class="name">来料检验</div>
                <div class="code-name">#icon-lailiaojianyan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mojianjian1"></use>
                </svg>
                <div class="name">末件检</div>
                <div class="code-name">#icon-mojianjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoujianjian1"></use>
                </svg>
                <div class="name">首件检</div>
                <div class="code-name">#icon-shoujianjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuiku"></use>
                </svg>
                <div class="name">退库</div>
                <div class="code-name">#icon-tuiku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baofei"></use>
                </svg>
                <div class="name">报废</div>
                <div class="code-name">#icon-baofei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zidongbukucun"></use>
                </svg>
                <div class="name">自动补库存</div>
                <div class="code-name">#icon-zidongbukucun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianyanzhong"></use>
                </svg>
                <div class="name">检验中</div>
                <div class="code-name">#icon-jianyanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-buhege"></use>
                </svg>
                <div class="name">不合格</div>
                <div class="code-name">#icon-buhege</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daijian"></use>
                </svg>
                <div class="name">待检</div>
                <div class="code-name">#icon-daijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hege"></use>
                </svg>
                <div class="name">合格</div>
                <div class="code-name">#icon-hege</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoma1"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#icon-saoma1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lailiaojianyanqingdan"></use>
                </svg>
                <div class="name">来料检验清单</div>
                <div class="code-name">#icon-lailiaojianyanqingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guochengjianyangongdan"></use>
                </svg>
                <div class="name">过程检验工单</div>
                <div class="code-name">#icon-guochengjianyangongdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chengpinjian"></use>
                </svg>
                <div class="name">成品检</div>
                <div class="code-name">#icon-chengpinjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weijian"></use>
                </svg>
                <div class="name">未检</div>
                <div class="code-name">#icon-weijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yijian"></use>
                </svg>
                <div class="name">已检</div>
                <div class="code-name">#icon-yijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiwancheng-copy"></use>
                </svg>
                <div class="name">已完成</div>
                <div class="code-name">#icon-yiwancheng-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwancheng"></use>
                </svg>
                <div class="name">未 完成</div>
                <div class="code-name">#icon-weiwancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baogong"></use>
                </svg>
                <div class="name">报工</div>
                <div class="code-name">#icon-baogong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saomarukujian"></use>
                </svg>
                <div class="name">扫码入库检</div>
                <div class="code-name">#icon-saomarukujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rukujian2"></use>
                </svg>
                <div class="name">入库检</div>
                <div class="code-name">#icon-rukujian2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianjian"></use>
                </svg>
                <div class="name">点检</div>
                <div class="code-name">#icon-dianjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saomabanchengpinjian"></use>
                </svg>
                <div class="name">扫码半成品检</div>
                <div class="code-name">#icon-saomabanchengpinjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saomaxunjian"></use>
                </svg>
                <div class="name">扫码巡检</div>
                <div class="code-name">#icon-saomaxunjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saomashoumojian"></use>
                </svg>
                <div class="name">扫码首末检</div>
                <div class="code-name">#icon-saomashoumojian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangmo2"></use>
                </svg>
                <div class="name">上模</div>
                <div class="code-name">#icon-shangmo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiamo2"></use>
                </svg>
                <div class="name">下模</div>
                <div class="code-name">#icon-xiamo2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjian1"></use>
                </svg>
                <div class="name">巡检</div>
                <div class="code-name">#icon-xunjian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoumojian"></use>
                </svg>
                <div class="name">首末检</div>
                <div class="code-name">#icon-shoumojian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banchengpinjian"></use>
                </svg>
                <div class="name">半成品检</div>
                <div class="code-name">#icon-banchengpinjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeidianjiansaoma"></use>
                </svg>
                <div class="name">设备点检扫码</div>
                <div class="code-name">#icon-shebeidianjiansaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongxujiansaoma"></use>
                </svg>
                <div class="name">工序检扫码</div>
                <div class="code-name">#icon-gongxujiansaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjiansaoma"></use>
                </svg>
                <div class="name">巡检扫码</div>
                <div class="code-name">#icon-xunjiansaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mojianjiansaoma"></use>
                </svg>
                <div class="name">末件检扫码</div>
                <div class="code-name">#icon-mojianjiansaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoujianjiansaoma"></use>
                </svg>
                <div class="name">首件检扫码</div>
                <div class="code-name">#icon-shoujianjiansaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeidianjian"></use>
                </svg>
                <div class="name">设备点检</div>
                <div class="code-name">#icon-shebeidianjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoma"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#icon-saoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-CIS"></use>
                </svg>
                <div class="name">CIS</div>
                <div class="code-name">#icon-CIS</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zyojiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-zyojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banquan"></use>
                </svg>
                <div class="name">版权</div>
                <div class="code-name">#icon-banquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenxinxi"></use>
                </svg>
                <div class="name">个人信息</div>
                <div class="code-name">#icon-gerenxinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shang"></use>
                </svg>
                <div class="name">上</div>
                <div class="code-name">#icon-shang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiamo1"></use>
                </svg>
                <div class="name">下模</div>
                <div class="code-name">#icon-xiamo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangmo1"></use>
                </svg>
                <div class="name">上模</div>
                <div class="code-name">#icon-shangmo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rukujian1"></use>
                </svg>
                <div class="name">入库检</div>
                <div class="code-name">#icon-rukujian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjian"></use>
                </svg>
                <div class="name">巡检</div>
                <div class="code-name">#icon-xunjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongxujian1"></use>
                </svg>
                <div class="name">工序检</div>
                <div class="code-name">#icon-gongxujian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mojianjian"></use>
                </svg>
                <div class="name">末件检</div>
                <div class="code-name">#icon-mojianjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoujianjian"></use>
                </svg>
                <div class="name">首件检</div>
                <div class="code-name">#icon-shoujianjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiamo"></use>
                </svg>
                <div class="name">下模</div>
                <div class="code-name">#icon-xiamo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangmo"></use>
                </svg>
                <div class="name">上模</div>
                <div class="code-name">#icon-shangmo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renwu"></use>
                </svg>
                <div class="name">任务</div>
                <div class="code-name">#icon-renwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongzuotai"></use>
                </svg>
                <div class="name">工作台</div>
                <div class="code-name">#icon-gongzuotai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我 的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rukujian"></use>
                </svg>
                <div class="name">入库检</div>
                <div class="code-name">#icon-rukujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongxujian"></use>
                </svg>
                <div class="name">工序检</div>
                <div class="code-name">#icon-gongxujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjianzuoye"></use>
                </svg>
                <div class="name">巡检作业</div>
                <div class="code-name">#icon-xunjianzuoye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoujianzuoye"></use>
                </svg>
                <div class="name">首检作业</div>
                <div class="code-name">#icon-shoujianzuoye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mojianzuoye"></use>
                </svg>
                <div class="name">末检作业</div>
                <div class="code-name">#icon-mojianzuoye</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
